<template>
 <div class="app-container">
    <!--查询栏-->
    <el-form :inline="true"
             v-if="advanced"
             :model="timeQuery"
             class="demo-form-inline">
      <el-form-item label="医生名称" prop="doctorName">
        <el-input v-model="timeQuery.doctorName" placeholder="请输入医生名称"></el-input>
      </el-form-item>
      <el-form-item label="科室名称" prop="officeName">
        <el-input v-model="timeQuery.officeName" placeholder="请输入科室名称"></el-input>
      </el-form-item>
      <el-form-item label="早上或者下午" prop="morOrAfter">
        <el-input v-model="timeQuery.morOrAfter" placeholder="请输入早上或者下午"></el-input>
      </el-form-item>

    </el-form>

    <!-- 操作 -->
   <div>
      <span class="table-page-search-submitButtons">

         <span class="submitButtons-left">
           <el-button size="small" type="success" @click="addTime" icon="el-icon-plus" plain>新增</el-button>
         </span>

        <span class="submitButtons-right">
           <el-button size="small" type="primary" @click="submitTimeQuery" icon="el-icon-search" plain>查询</el-button>
           <el-button size="small" @click="resetTimeQuery" icon="el-icon-refresh">重置</el-button>
           <a @click="toggleAdvanced" style="margin-left: 8px; color: #00BFFF; font-size: 14px">
             {{ advanced ? '收起' : '展开' }}
             <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
           </a>
         </span>

      </span>
   </div>
    <!-- 排班列表 -->
    <el-table  :data="timeList"
              border
              fit
              ref="multiplePublishActTable"
              highlight-current-row>

      <el-table-column prop="doctorName" label="医生姓名" width="140" align="center"></el-table-column>
      <el-table-column prop="officeName" label="科室名称" width="150" align="center"></el-table-column>
      <el-table-column prop="address" label="办公地点" width="160" align="center"></el-table-column>
      <el-table-column prop="mobile" label="办公联系方式" width="150" align="center"></el-table-column>
      <el-table-column prop="time" label="时间" width="130" align="center"></el-table-column>
      <el-table-column prop="morOrAfter" label="上午/下午" width="140" align="center"></el-table-column>
      <el-table-column prop="listnum" label="余号" width="140" align="center"></el-table-column>

      <el-table-column label="操作" align="center">

        <template slot-scope="scope">

          <el-button type="primary" @click="updateTime(scope.row)" size="mini" icon="el-icon-edit" round plain>修改</el-button>

          <el-button type="danger" size="mini" icon="el-icon-delete"
                     @click="removeTime(scope.row.id)" round plain>删除
          </el-button>

        </template>
      </el-table-column>

    </el-table>
    <!--分页器-->
    <el-pagination
      background
      :current-page="queryParams.currentPage"
      :page-size="queryParams.limit"
      :total="timeListTotal"
      style="padding: 60px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="changeGetTime"
    />
    <!-- 修改排班 -->
    <el-dialog :title="title"
      :visible.sync="Visible"
      width="50%">
     <!--修改表单 -->
      <el-form :model="updateTimeForm" ref="updateForm" label-width="120px" :rules="updateTimeRules">
        <el-form-item label="医生" width="100px" prop="doctorName">
          <el-select @change="chooseDoctor" v-model="updateTimeForm.doctorName" placeholder="请选择">
            <el-option v-for="item in doctorList" :key="item.id"  :label="item.name" :value="item"></el-option>
            <!-- <el-option label="下午" value="下午"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="科室名称" prop="officeName" width="100px">
          <el-input placeholder="请选择" v-model="updateTimeForm.officeName"/>
        </el-form-item>
        <el-form-item label="办公地点" prop="address" width="100px">
          <el-input placeholder="请选择" v-model="updateTimeForm.address"/>
        </el-form-item>

        <el-form-item label="办公联系方式" prop="mobile" width="100px">
          <el-input placeholder="请选择" v-model="updateTimeForm.mobile"/>
        </el-form-item>
         <el-form-item label="时间" prop="time" width="100px">
            <el-date-picker
              v-model="updateTimeForm.time" value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
         <el-form-item label="上午/下午" prop="morOrAfter" width="100px">
          <el-select v-model="updateTimeForm.morOrAfter" placeholder="请选择">
            <el-option label="上午" value="上午"></el-option>
            <el-option label="下午" value="下午"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item v-if="updateTimeForm.listnum" label="余号" prop="listnum" width="100px">
          <el-input  v-model="updateTimeForm.listnum"/>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="submitUpdateTime">确 定</el-button>
      </span>
    </el-dialog>

 </div>
</template>
<script>
  import time from '@/api/yy/timeManagement'
  import doctor from '@/api/yy/doctor';

  export default
  {
    name:"timeList",
    data()
    {
      return {
        // 是否展示查询
        advanced:false,
        // 医生列表
        doctorList:[],
        // 排班列表
        timeList:[],
      // 医生查询参数
        doctorQuery:
        {
          name:"",
          introduce:"",
          address:"",
          mobile:"",
        },

        // 排班查询参数
        timeQuery:
        {
          timeName:"",
          morOrAfter:"",
          officeName:"",
          time:"",
        },
        docqueryParams:{//医生分页查询参数
            currentPage: 1,
            limit: 100,
        },
        queryParams: //分页查询参数
        {
          currentPage: 1,
          limit: 10,
        },
        // 查询排班总数
        timeListTotal:0,
        // 对话框标题
        title:'',
        // 显示修改对话框
        Visible:false,
        // 修改排班表单
        updateTimeForm:{
          listnum:30,//余号数量
         },
        // 上午或下午的规则

        //排班时间的检查规则
        updateTimeRules:
          {
            doctorName:
              [
                { required: true, message: "医生名称不能为空！", trigger: "change" }
              ],
            time:
              [
                { required: true, message: "时间不能为空！", trigger: "change" }
              ],
            morOrAfter:
              [
                {required: true, message: "请选择上午或者下午", trigger: "change" },
              ],
            listnum:
              [
                { required: true, message: "余号不能为空！", trigger: "blur" }
              ],
          },

      }

    },
    created() {
      this.getTime();
      this.getDoctors();
    },
    methods:{
       //查询排班
        submitTimeQuery()
        {
          if(!this.advanced)
          {
            this.advanced = !this.advanced;
          }
          this.getTime();
        },
        //重置排班查询参数
        resetTimeQuery()
        {
          this.timeQuery =
          {
             timeName:"",
              morOrAfter:"",
              officeName:"",
              time:"",
          };
          this.getTime();
        },
        /*query展开和收起*/
        toggleAdvanced()
        {
          this.advanced = !this.advanced;
        },
    //  获取医生列表
       getDoctors(){
          doctor.pageDepartmentCondition(this.docqueryParams.currentPage,this.docqueryParams.limit,this.doctorQuery).then(res=>{
              console.log("res",res)
              this.doctorList=res.data.rows;
          })
        },
        // 选择医生
        chooseDoctor(doctor)
        {
          console.log("e",doctor)
          this.updateTimeForm.doctorName=doctor.name;
          this.updateTimeForm.officeName=doctor.officeName;
          this.updateTimeForm.address=doctor.address;
          this.updateTimeForm.mobile=doctor.mobile;
          this.updateTimeForm.doctorId=doctor.id;
           this.updateTimeForm.officeId=doctor.officeId+"";
        },
        chooseMorOrAfter(command){
          console.log("command",command)
          this.updateTimeForm.morOrAfter=command;
        },
        // 分页查看排班
        changeGetTime(e){
            // console.log("e",e)
            this.queryParams.currentPage=e;
            this.getTime();
        },
      // 获取排班信息
        getTime(){
          time.getTimeList(this.queryParams.currentPage,this.queryParams.limit,this.timeQuery).then(res=>{
              console.log("resTime",res)
              this.timeList=res.data.rows;
              this.timeListTotal=res.data.total;
              console.log(this.timeListTotal,res.data.total)
          })
        },
        // 新增排班信息
        addTime(){
          this.Visible=true;
          this.title="新增排班信息";
          this.updateTimeForm={
            listnum:30
          };
        },
        // 取消新增
        cancelAdd(){
          this.updateTimeForm={};
          this.Visible=false;
          // 取消校验
          this.$refs.updateForm.resetFields();

        },
        // 更新排班信息
        updateTime(form){
          this.Visible=true;
          this.title="修改医生信息";
          this.updateTimeForm=Object.assign({},form);
          // console.log("this.updateTimeForm",this.updateTimeForm)
        },
        // 提交更新或者新增
        submitUpdateTime(){
          this.$refs['updateForm'].validate((valid) =>
          {
            console.log("this.updateTimeForm",this.updateTimeForm)
            if(valid)
            {
              console.log("this.title=='新增排班信息'",this.title=="新增排班信息")
               if(this.title=="新增排班信息"){
                  time.addTime(this.updateTimeForm).then((response)=>
                  {
                    console.log("respon",response)
                      if(response.code === 200)
                      {
                          this.$message.success("新增成功!");
                           this.Visible = false;
                            this.getTime();
                            window.location.reload();
                      }else
                      {
                          this.$message.error("新增失败!");

                      }
                  });
               }
               else{
                  time.updateTime(this.updateTimeForm).then((response)=>
                  {
                      if(response.code === 200)
                      {
                          this.$message.success("修改成功!");
                           this.Visible = false;
                            this.getTime();
                            // window.location.reload();
                      }else
                      {
                          this.$message.error("修改失败!");

                      }
                  });
               }


            }
          });
        },
        // 删除排班信息
        removeTime(id){
          const h = this.$createElement;
                  this.$msgbox({
                    title: '确定删除该信息？',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                      if (action === 'confirm') {
                        time.deleteTimeById(id).then(response=>{
                          if(response.code === 200)
                          {
                            this.$message.success("删除成功!");
                            window.location.reload();
                          }else
                          {
                            this.$message.error("删除失败!");
                          }
                           done();
                        })
                      } else {
                        done();
                      }
                    }
                  });

        }
    }
  }
</script>
<style>
 .table-page-search-submitButtons
  {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .headImg
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hide .el-upload--picture-card {
    display: none;
  }
</style>
